.clavier-global {

    width: var(--largeur-clavier);

    /* changé en js */
    --top-clavier: 0;

    position: absolute;
    top: calc(var(--top-clavier) + var(--écart-champ-clavier));

    padding: 0 35px;

    box-sizing: border-box;

    z-index: 5999;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #EAEFF0;

    opacity: 1;

    transition: top 300ms ease-in-out,
        opacity 300ms ease-in-out;
    overflow: hidden;
}

body.orientation-paysage .clavier-global {
    width: 1035px;
    left: calc(var(--rembourrage-récupération) + 757px);
}

.clavier-global.fermé {
    opacity: 0;
    top: var(--page-hauteur);
    pointer-events: none;
}

.clavier-global button.fermer {
    align-items: center;

    background-color: #ce5252;
}

.clavier-global button.fermer > img {
    /*height: 9px;*/
    /*width: 15px;*/

    margin-left: 10px;

    flex-shrink: 0;
}

.clavier-global > button,
.clavier-global .contrôles > button {
    padding: 5px 10px;

    display: flex;
    flex-direction: row;

    align-items: center;

    font-size: 25px;
    color: white;
}

.clavier-global > .bloc {
    margin: 25px 0;

    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-gap: 5px;
}

.clavier-global > .bloc > button {

    height: 60px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-size: 30px;
    font-family: monospace;

    background-color: white;
}

.clavier-global > .bloc > button.espace {
    grid-column-start: 1;
    grid-column-end: -1;
}

/* libre-latin */
.clavier-global:not([data-mode^="libre"]) button.espace {
    display: none;
}

.clavier-global .bloc button[data-mode] {
    display: none;
}

.clavier-global[data-mode="libre-latin"] .bloc button[data-mode="libre-latin"],
.clavier-global[data-mode="courriel"] .bloc button[data-mode="courriel"] {
    display: flex !important;
}

.clavier-global > .bloc > button:hover {
    background-color: #EAEFF0;
}

.clavier-global > .contrôles {
    width: 100%;
    height: 56px;

    margin: 15px 0;

    position: relative;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;

    justify-content: center;
}

.clavier-global > .contrôles > button {

    height: 100%;

    border-radius: 5px;

    justify-content: center;

    font-weight: 500;
}

.clavier-global > .contrôles > button.valider {
    width: 256px;

    background-color: #24a955;
}

.clavier-global > .contrôles > button.effacer,
.clavier-global > .contrôles > button.maj {
    width: 174px;

    position: absolute;
}

.clavier-global > .contrôles > button.maj {
    left: 0;

    color: black;
    background-color: #c7c7c7;

    font-size: 2.2rem;
}

.clavier-global.maj > .contrôles > button.maj {
    color: white;
    background-color: #315ff5;
}

.clavier-global > .contrôles > button.effacer {
    right: 0;

    background-color: #cf0a2c;
}